import {Text, View, StyleSheet, FlatList, TouchableOpacity, Platform, Pressable} from 'react-native';
import {ThemedView} from "@/components/ThemedView";
import {ThemedText} from "@/components/ThemedText";
import {useNavigation} from "expo-router";
import {RouteProp, useRoute} from "@react-navigation/core";
import {AppNavigationProp, AppRouteProp, ROUTES} from "@/app/route/RouteParams";
import i18n from "@/app/i18n/i18n";
import {Colors} from "@/constants/Colors";
import {useThemeColor} from "@/hooks/useThemeColor";
import {Button} from "react-native-ui-lib";


export default function DetailScreen() {
    const route: AppRouteProp<typeof ROUTES.Detail> = useRoute();
    const navigation = useNavigation<AppNavigationProp<any>>();
    const { id } = route.params; // 获取 id 参数
    const handleItemPress = (item: number) => {
        // 在这里可以添加你想要执行的具体操作，比如导航到另一个页面、显示弹出框等
        console.log(`Clicked on ${item}`);
        // alert(item)
    };
    return (
        <>
            <ThemedView style={[styles.container,]}>
                <ThemedText>我是详情页{id}</ThemedText>
                <Button label={"跳到表格页"} onPress={() =>{
                    navigation.navigate(ROUTES.Tableview);
                }}/>
                <FlatList data={
                    Array.from({length: 20}).map((_, i) => i)
                } renderItem={
                    ({item}) =>
                        <Pressable
                            key={item}
                            onPress={() => handleItemPress(item)}
                            android_ripple={{ color: '#ccc' }}
                        >
                            <ThemedView style={{padding: 10, borderBottomWidth: 0.5, borderBottomColor: '#ccc',flexDirection: 'row' } } >
                                <ThemedText type='default' style={styles.title}>{item}</ThemedText>
                                <ThemedText type='default' style={styles.value}>item</ThemedText>
                            </ThemedView>
                        </Pressable>
                }></FlatList>
            </ThemedView>
        </>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    title: {
        fontSize: 20,
    },
    value: {
        fontSize: 20,
        paddingLeft: 10,
    },
});
